<template>
	<view class="content">
		<view :class="show ? 'fade-in' : 'fade-out'">
			<block v-for="(item,index) in list" :key="index">
				<view class="list">
					<view class="user tn-flex tn-flex-col-center">
						<view class="user-img">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="user-right">
							<view class="name">{{item.nickname}}</view>
							<!-- <view class="name tishi">关注了你</view> -->
						</view>
						<view class="btn" @click="submit(item.to_user_id)">移除</view>
					</view>
				</view>
			</block>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				show: false,
			};
		},
		onLoad() {
			this.getList(1)
		},
		methods: {
			async getList(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/play/play_block_list',
					})
					let data = result.data.data
					this.list = data
					this.show = true
				} catch (e) {
					this.msg(e.data.msg)
				}

			},
			async submit(to_user_id){
				try{
					let result = await this.$request({
						loading:1,
						method:'post',
						url:'/api/play/play_block',
						data:{
							to_user_id
						}
					})
					console.log(result)
					this.getList()
				}catch(e){
					//TODO handle the exception
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;

		.list {
			margin-bottom: 40rpx;

			.user {
				.user-img {
					width: 68rpx;
					height: 68rpx;

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.user-right {
					padding-left: 16rpx;
					flex: 1;

					.name {
						font-size: 24rpx;
						font-weight: 400;
						color: #FFFFFF;
					}

					.tishi {
						margin-top: 8rpx;
					}

				}

				.btn {
					width: 120rpx;
					height: 56rpx;
					background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
					border-radius: 42rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 56rpx;
					text-align: center;
				}
			}


		}
	}
</style>